<template>
  <section class="cool-header">
    <div class="cool-header-logo">
      COOL-UI
    </div>
    <div class="cool-header-theme">
      <cSwitch :value="themeModel.sysTheme" :options="THEMES" width="100px" @change="changeTheme"></cSwitch>
    </div>
  </section>
</template>

<script setup>
import cSwitch from '@/components/cSwitch/cSwitch.vue';
import * as themeModel from "@/theme/index.js";
import { THEMES } from "@/theme/index.js";

const changeTheme = (theme) => {
  themeModel.setTheme(theme.value);
}

</script>

<style scoped>
.cool-header {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  position: relative;
}
.cool-header-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 10px;
}
.cool-header-logo{
  font-weight: 600;
  font-size: var(--font-size-15);
  color: var(--font-color);
}
</style>